<template>
  <ul class="commentlist">
    <li v-for="(item, index) in list" :key="index">
      <div class="l">
        <img :src="item.avatar" alt="" />
      </div>
      <div class="c">
        <div class="nickname">{{ item.nickName }}</div>
        <div class="rate">
          <van-rate
            v-model="item.grade"
            :size="24"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <span>{{ item.time | getDate }}</span>
        </div>
        <div class="com">
          {{ item.comment }}
        </div>
      </div>
      <div class="r">
        {{ item.likes }}
        <span class="iconfont icon-dianzan"></span>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  filters: {
    getDate(val) {
      let d = new Date(val);
      var m = d.getMonth() + 1;
      var m = m < 10 ? "0" + m : m;
      return `${d.getFullYear()}年${m}月${d.getDate()}日`;
    },
  },
};
</script>

<style lang="scss" scoped>
.commentlist {
  li {
    display: flex;
    .l {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .c {
      flex: 1;
      text-align: left;
      padding-left: 10px;
      .nickname {
        font-size: 16px;
        margin-top: 5px;
      }
      .rate {
        font-size: 14px;
        margin-top: 5px;
      }
      .com {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 20px 0;
        line-height: 1.2;
      }
    }
    .r {
      width: 45px;
      font-size: 14px;
      .color {
        color: red;
      }
    }
  }
}
</style>
